<template>
  <b-layout id="conflict-feedback" class="history-results" :border="false" placement="top" space="155px"
            v-loading="loading"
            :element-loading-text="loadingText"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.7)">
    <div slot="one">
      <div class="title">冲突反馈审核</div>
      <div slot="first" class="header">
        <conflict-feedback-filter @setTabsName="setTabsName" @setFilterOptions="setFilterOptions"></conflict-feedback-filter>
      </div>
    </div>
    <div slot="last" class="list">
      <b-layout slot="last" mode="vertical" placement="bottom" space="50px" :border="false">
        <conflict-feedback-list slot="first" @sortChange="sortChange" @anewGetFeedbackAuditList="anewGetFeedbackAuditList" :table-data="tableData" :active-name="activeName"></conflict-feedback-list>
        <customPaginator
          slot="last"
          ref="paginator"
          class="inventory-paginator"
          background="background"
          @pageChange="handlePageChange"
        ></customPaginator>
      </b-layout>
    </div>
  </b-layout>
</template>

<script>
import BLayout from '@/layouts/BinaryLayout'
import ConflictFeedbackFilter from '../components/conflict-feedback-filter'
import CustomPaginator from '@/components/public/CustomPaginator'
import ConflictFeedbackList from '../components/confilict-feedback-list'
export default {
  components: {
    BLayout,
    ConflictFeedbackFilter,
    CustomPaginator,
    ConflictFeedbackList
  },
  filters: {

  },
  props: {

  },
  data () {
    return {
      loadingText: '加载中...',
      loading: false,
      page: 1,
      page_size: 10,
      activeName: null,
      order_key: null,
      order_type: 'desc',
      tableData: null
    }
  },
  computed: {

  },
  watch: {
    activeName: {
      handler (val) {
        this.order_key = val === 'toAudit' ? 'review_time' : 'check_time'
      },
      deep: true
    }
  },
  created () {

  },
  mounted () {
  },
  activated () {

  },
  beforeDestroy () {

  },
  methods: {
    handlePageChange (page) {
      this.page = page.page
      this.page_size = page.pagesize
      this.getFeedbackAuditList(this.searchFilter)
    },
    setTabsName (val) {
      this.activeName = val
    },
    setFilterOptions (val) {
      this.searchFilter = val
      this.page = 1
      this.$refs.paginator.updatePage(this.page_size, 1, [10, 20, 30, 40])
      this.getFeedbackAuditList(val)
    },
    anewGetFeedbackAuditList () {
      this.getFeedbackAuditList(this.searchFilter)
    },
    sortChange ({ prop, order }) {
      if (prop && order) {
        this.order_key = prop
        this.order_type = order === 'ascending' ? 'asc' : 'desc'
      } else {
        this.order_key = this.activeName === 'toAudit' ? 'review_time' : 'check_time'
        this.order_type = 'desc'
      }
      this.getFeedbackAuditList(this.searchFilter)
    },
    getFeedbackAuditList (params) {
      this.loading = true
      params.page = this.page
      params.page_size = this.page_size
      if (this.order_key && this.order_type) {
        params.order_key = this.order_key
        params.order_type = this.order_type
      }
      this.$api.getFeedbackAuditList(params).then(res => {
        this.loading = false
        this.tableData = res.data.items
        this.$refs.paginator.updateTotal(res.data.page.total)
      }).catch(err => {
        this.loading = false
        console.log(err)
        this.$msgMnger.httpError(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

#conflict-feedback{
  height: 100%;
  box-sizing: border-box;
  .title {
    font-size: $fs-m;
    font-weight: 400;
    color: $sedondary-text-color;
    line-height: 20px;
    margin-bottom: 15px;
  }
  .header{
    background: white;
  }
  .list{
    height: calc(100% - 16px);
    margin-top: 14px;
    background: white;
  }
}
</style>
